<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Custom Voices</title>
  <link rel="stylesheet" type="text/css" href="css/common.css">
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
  <style>
  .card {
    margin-top: 30px;
  }
  .card-body {
    padding-bottom: .25rem;
  }
  .container {
    min-width: 500px;
  }
  .dark-mode .card {
    background-color: #363636;
  }
  .dark-mode .card-header {
    background-color: #444;
  }
  </style>

  <script src="js/jquery-3.7.1.min.js"></script>
  <script src="js/aws-sdk.js"></script>
  <script src="js/defaults.js"></script>
  <script src="js/tts-engines.js"></script>
  <script src="js/custom-voices.js"></script>
</head>
<body>
  <div class="container">
    <h3 class="mt-3">Enable Custom Voices</h3>

    <div class="card">
      <div class="card-header">
        Enter AWS credentials to enable Amazon Polly voices.
      </div>
      <div class="card-body">
        <form>
          <div class="form-group">
            <div class="input-group">
              <input type="text" class="form-control" id="aws-access-key-id" placeholder="Access key ID" />
              <input type="text" class="form-control" id="aws-secret-access-key" placeholder="Secret access key" />
              <div class="input-group-append">
                <button type="button" class="btn btn-primary" id="aws-save-button">Save</button>
              </div>
            </div>
          </div>
          <div class="form-group">
            <img id="aws-progress" class="status progress" src="img/loading.gif" />
            <div id="aws-success" class="status alert alert-success"></div>
            <div id="aws-error" class="status alert alert-danger"></div>
          </div>
        </form>
      </div>
    </div>

    <div class="card">
      <div class="card-header">
        Enter GCP API key to enable Google Wavenet voices.
      </div>
      <div class="card-body">
        <form>
          <div class="form-group">
            <div class="input-group">
              <input type="text" class="form-control" id="gcp-api-key" placeholder="API key" />
              <div class="input-group-append">
                <button type="button" class="btn btn-primary" id="gcp-save-button">Save</button>
              </div>
            </div>
            <br/>
            <div class="input-group">
              <label for="gcp-enable-studio">
              <input type="checkbox" id="gcp-enable-studio" name="gcp-enable-studio" value="enabled">
              Include Google Studio voices. (WARNING: 10x cost)</label>
            </div>
          </div>
          <div class="form-group">
            <img id="gcp-progress" class="status progress" src="img/loading.gif" />
            <div id="gcp-success" class="status alert alert-success"></div>
            <div id="gcp-error" class="status alert alert-danger"></div>
          </div>
        </form>
      </div>
    </div>

    <div class="card">
      <div class="card-header">
        Enter IBM API key to enable IBM Watson voices.
      </div>
      <div class="card-body">
        <form>
          <div class="form-group">
            <div class="input-group">
              <input type="text" class="form-control" id="ibm-api-key" placeholder="API key" />
              <input type="text" class="form-control" id="ibm-url" placeholder="URL" />
              <div class="input-group-append">
                <button type="button" class="btn btn-primary" id="ibm-save-button">Save</button>
              </div>
            </div>
          </div>
          <div class="form-group">
            <img id="ibm-progress" class="status progress" src="img/loading.gif" />
            <div id="ibm-success" class="status alert alert-success"></div>
            <div id="ibm-error" class="status alert alert-danger"></div>
          </div>
        </form>
      </div>
    </div>

    <div class="card">
      <div class="card-header">
        Enter a <a href="https://github.com/kfatehi/riva_tts_proxy">Riva TTS proxy server</a> URL to enable Nvidia Riva voices. 
      </div>
      <div class="card-body">
        <form>
          <div class="form-group">
            <div class="input-group">
              <input type="text" class="form-control" id="riva-url" placeholder="URL" />
              <div class="input-group-append">
                <button type="button" class="btn btn-primary" id="riva-save-button">Save</button>
              </div>
            </div>
          </div>
          <div class="form-group">
            <img id="riva-progress" class="status progress" src="img/loading.gif" />
            <div id="riva-success" class="status alert alert-success"></div>
            <div id="riva-error" class="status alert alert-danger"></div>
          </div>
        </form>
      </div>
    </div>

    <div class="card">
      <div class="card-header card-header-dark">
        Enter OpenAI API key to enable ChatGPT voices.
      </div>
      <div class="card-body">
        <form>
          <div class="form-group">
            <div class="input-group">
              <input type="text" class="form-control" id="openai-api-key" placeholder="API Key">
              <input type="text" class="form-control" id="openai-url" placeholder="[Optional] API URL">
              <div class="input-group-append">
                <button type="button" class="btn btn-primary" id="openai-save-button">Save</button>
              </div>
            </div>
          </div>
          <div class="form-group">
            <img id="openai-progress" class="status progress" src="img/loading.gif">
            <div id="openai-success" class="status alert alert-success"></div>
            <div id="openai-error" class="status alert alert-danger"></div>
          </div>
        </form>
      </div>
    </div>

    <div class="card">
      <div class="card-header">
        Enter Azure credentials to enable Azure voices.
      </div>
      <div class="card-body">
        <form>
          <div class="form-group">
            <div class="input-group">
              <input type="text" class="form-control" id="azure-region" placeholder="SPEECH_REGION">
              <input type="text" class="form-control" id="azure-key" placeholder="SPEECH_KEY">
              <div class="input-group-append">
                <button type="button" class="btn btn-primary" id="azure-save-button">Save</button>
              </div>
            </div>
          </div>
          <div class="form-group">
            <img id="azure-progress" class="status progress" src="img/loading.gif">
            <div id="azure-success" class="status alert alert-success"></div>
            <div id="azure-error" class="status alert alert-danger"></div>
          </div>
        </form>
      </div>
    </div>

    <div class="mt-4 mb-3">
      <a href="options.html" class="btn btn-secondary">Back to Options</a>
    </div>

  </div>
</body>
</html>
